<template>
    <div class="fullScreen-card" v-if="dialogShow">
        <div class="header-box">
            <div class="fullScreen-title">
                <div class="title-text">
                    {{ props.title }}
                </div>

            </div>
            <el-icon size="25" color="white" @click="closedialog">
                <CloseBold />
            </el-icon>
        </div>
        <div class="container">
            <slot></slot>
        </div>
    </div>
</template>

<script setup lang="ts">
const emit = defineEmits(['closeDialog'])
const props = defineProps({
    title: {
        type: String,
        default: () => '监控'
    },
    dialogShow: {
        type: Boolean,
        default: () => false
    }
})

const closedialog = () => {
    console.log(`%c` + `关闭弹窗` + ` is running`, `font-weight: bold; color: #ffb712; background:linear-gradient(-45deg, #bd34fe 50%, #47caff 50% );background: -webkit-linear-gradient( 120deg, #bd34fe 30%, #41d1ff );background-clip: text;-webkit-background-clip: text; -webkit-text-fill-color:linear-gradient( -45deg, #bd34fe 50%, #47caff 50% ); padding: 8px 12px; border-radius: 4px;`);
    emit('closeDialog', false)
}
</script>

<style lang="scss" scoped>
.fullScreen-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    background-color: rgba(9, 23, 51, 0.8) !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .header-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        height: 5%;
        align-items: center;

        .el-icon {
            margin-right: 30px;
        }

        .fullScreen-title {
            width: 500px;
            height: 100%;
            background: url('../../assets/cardImages/左弹框标题栏@2x.png') center no-repeat;
            background-size: 100% 100%;

            .title-text {
                font-size: 20px;
                margin-left: 30px;
                font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                font-weight: bold;
                line-height: 2;
                text-shadow: 0px 4px 4px #2268F0;
                background: linear-gradient(180deg, #FFFFFF 0%, #40C6FF 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }

    }

    .container {
        padding: 20px;
        box-sizing: border-box;
        width: 100%;
        height: 95%;
        overflow: hidden;
    }

}
</style>